<template>
  <!--详情页面-->
  <div class="container">
    <el-page-header
      @back="goBack"
      title="预约详情"
      style="padding: 10px 20px"
    />
    <!--    预约信息区域-->
    <el-form :model="orderForm" style="padding: 20px" label-width="80px">
      <el-form-item label="食堂名称" prop="canteenName">
        <span>{{ orderForm.canteenName }}</span>
      </el-form-item>
      <el-form-item label="包房名称" prop="messageName">
        <span>{{ orderForm.messageName }}</span>
      </el-form-item>
      <el-form-item label="用餐类型" prop="orderEatType">
        <span>{{ orderForm.orderEatType === "0" ? "午餐" : "晚餐" }}</span>
      </el-form-item>
      <el-form-item label="预订时间" prop="orderEatTime">
        <span>{{ orderForm.orderEatTime }}</span>
      </el-form-item>
      <el-form-item label="预订人" prop="createBy">
        <span>{{ orderForm.createBy }}</span>
      </el-form-item>
      <el-form-item label="详情" prop="comboImage" v-show="orderForm.price">
        <div
          style="
            margin-left: 20px;
            border: 1px solid #cccccc;
            padding: 10px 30px;
            border-radius: 5px;
          "
          v-html="orderForm.comboImage"
        ></div>
      </el-form-item>
      <el-form-item label="餐标">
        <span>{{ orderForm.price ? orderForm.price + "元" : "" }}</span>
      </el-form-item>
      <el-form-item label="备注" prop="messageRemark">
        <span>{{ orderForm.messageRemark }}</span>
      </el-form-item>
      <el-form-item label="进度" prop="orderIstrue">
        <span>{{
          orderForm.orderIstrue === "0"
            ? "失败"
            : orderForm.orderIstrue === "1"
            ? "成功"
            : "未审核"
        }}</span>
      </el-form-item>
      <el-form-item label="意见" prop="processExamineOpinion">
        <span>{{ orderForm.processExamineOpinion }}</span>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" size="small" @click="goBack">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { roomInfo } from "@/api/canteen/order";
const route = useRoute();
const router = useRouter();
function goBack() {
  router.back();
}
//预定ID
const orderId = ref("");
const orderForm = ref({});
//通过ID获取详情
function getRoomInfo() {
  roomInfo(orderId.value).then((res) => {
    orderForm.value = res.data;
  });
}
onMounted(() => {
  orderId.value = route.query.id;
  getRoomInfo();
});
</script>

<style scoped lang="scss">
.container {
  height: calc(100vh - 200px);
  background: #ffffff;
  box-shadow: 0 0 16px rgba(96, 96, 96, 0.16);
  border-radius: 6px;
  padding: 20px;
  overflow-y: auto;
  margin-top: 20px;
}
.el-form-item {
  margin-bottom: 0px;
}
</style>
